<template>
  <div class="app">
    <h3>Son1 子组件</h3>
    <span>从vuex获取的值：{{ $store.state.key }}</span>
    <span>从vuex获取的值：{{ key }}</span>
    <span>从vuex获取的值：{{ username }}</span>
    <!--    <span>从vuex获取的值：{{count}}</span>-->
    <button @click="updateKey(456)">+1</button>
    <button @click="increase()">组件异步调用mutations</button>
    <button @click="increaseAsync">1秒后+1</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'Son1Component',
  computed: {
    ...mapState(['key']),
    username () {
      return this.$store.state.username
    }
  },
  methods: {
    ...mapMutations(['updateKey']),
    increase () {
      setTimeout(() => this.$store.commit('increase', 1), 1000)
      // this.$store.commit('update', {
      //   name: '张三',
      //   age: 10
      // })
    },
    ...mapActions(['increaseAsync']),
    increaseKeyAsync () {
      this.$store.dispatch('increaseAsync')
    }
  }
}
</script>

<style scoped>
.app {
  border: 1px solid gray;
}
</style>
